require('./Pagecsjsdetail.less');
import Reflux from 'reflux';
import ReactMixin from 'react-mixin';
import Actions from './Actions'
import Store from './Store';
import { Button,Page, Panel,PanelHeader, PanelBody, PanelFooter,ButtonArea,
  MediaBox,Cells, Cell,CellHeader,MediaBoxTitle,MediaBoxHeader,
  MediaBoxDescription,MediaBoxBody,MediaBoxInfo,MediaBoxInfoMeta,
  CellBody,CellFooter,Toast, Form,FormCell,Radio,Gallery,GalleryDelete,
  Uploader,TextArea,ActionSheet,Flex,FlexItem,SearchBar} from  'react-weui/build/packages'
import {Control} from 'react-keeper';
import gaosulu  from './../../../assets/img/高速路.png';
import xiaohongqi  from './../../../assets/img/小红旗.png';
import gongchengkaigongjianshe  from './../../../assets/img/工程开工建设.jpg';


class Csjsdetail extends React.Component {

  constructor(props) {
    super(props);
  }


  render() {
    return (
      <div>
        <Panel>
          <PanelBody>
            <MediaBox type="appmsg">
              <MediaBoxHeader>
                <img src={gaosulu} style={{
                  width:35,
                  height:35,
                  marginTop:15
                }}/>
              </MediaBoxHeader>
              <MediaBoxBody>
                <MediaBoxTitle>
                            <span className="pname" style={{
                              float:"left"
                            }}>{this.state.csjsdetail.dataDetail.title}</span>
                  <div className="radiusDiv">
                    <span className="rediusPname">市政</span>
                  </div>
                </MediaBoxTitle>
                <MediaBoxDescription>
                  <img src={xiaohongqi} style={{
                    width:13,
                    height:13
                  }}/>
                  形象进度<br/>
                  {this.state.csjsdetail.dataDetail.createTime}
                </MediaBoxDescription>
              </MediaBoxBody>
            </MediaBox>
          </PanelBody>

          <PanelBody style={{
            textAlign:"center"
          }}>
            <img src={gongchengkaigongjianshe} style={{
              width:357,
              height:176
            }}/>
          </PanelBody>

          <PanelBody>
            <div className="csjsarticle">
              <div className="csjsspantitle">
                <span className="csjsdisplayspantitle">开工时间</span>
              </div>
              <div className="csjsspancontent">
                <span className="csjsdisplayspancontent">2017-7-1</span>
              </div>

              <div style={{
                marginTop:16
              }} className="csjsspantitle">
                <span className="csjsdisplayspantitle">竣工时间</span>
              </div>
              <div style={{
                marginTop:16
              }} className="csjsspancontent">
                <span className="csjsdisplayspancontent">2018-8-1</span>
              </div>

              <div style={{
                marginTop:16
              }} className="csjsspantitle">
                <span className="csjsdisplayspantitle">地点/路段</span>
              </div>
              <div style={{
                marginTop:16
              }} className="csjsspancontent">
                <span className="csjsdisplayspancontent">城东大道13号路口至
夷陵长江大桥北入口入口入口入口</span>
              </div>

              <div style={{
                marginTop:16
              }} className="csjsspantitle">
                <span className="csjsdisplayspantitle">配套设施</span>
              </div>
              <div style={{
                marginTop:16
              }} className="csjsspancontent">
                <span className="csjsdisplayspancontent">呵呵呵 </span>
              </div>

              <div style={{
                marginTop:16,
                width:"100%"
              }} className="csjsspantitle">
                <span className="csjsdisplayspantitle">工程简介</span>
              </div>
              <div style={{
                marginTop:16,
                width:"100%"
              }} className="csjsspancontent">
                <p style={{
                  marginLeft:13,
                  fontSize: "14px",
                  fontFamily : 'Arial Normal Arial',
                  fontWeight: 400
                }}>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                  consequat. Duis aute</p>
              </div>
            </div>
          </PanelBody>
        </Panel>
      </div>
    );
  }

  componentWillMount() {
    if(Control.state){
      Actions.loadData(Control.state.dataDetail)
    }
  }

  componentDidMount() {

  }

  componentWillReceiveProps(nextProps) {

  }

  shouldComponentUpdate(nextProps, nextState) {
    const thisProps = this.props || {},
      thisState = this.state.csjsdetail || {};
    if (Object.keys(thisProps).length !== Object.keys(nextProps).length ||
      Object.keys(thisState).length !== Object.keys(nextState).length) {
      return true;
    }

    for (const key in nextProps) {
      if (thisProps[key] !== nextProps[key]) {
        console.log(thisProps[key], nextProps[key]);
        return true;
      }
    }

    for (const key in nextState) {
      if (thisState[key] !== nextState[key]) {
        return true;
      }
    }
    return false;
  }

}

ReactMixin.onClass(Csjsdetail, Reflux.connect(Store, 'csjsdetail'));


export default Csjsdetail ;
